<template>
	<view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">客户信息</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">客户ID</u-col>
				<u-col span="8">{{ successDetail.invHistMessage.id }}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">客户ID</view>
				<view class="item_content_right">
					{{ successDetail.invHistMessage.id }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">客户名称</u-col>
				<u-col span="8">{{successDetail.invHistMessage.producerName}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">客户名称</view>
				<view class="item_content_right">
					{{successDetail.invHistMessage.producerName}}
				</view>
			</view>
		</view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">发票基本信息</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">发票类型</u-col>
				<u-col span="8">
					<span v-if="successDetail.invOver.invoiceType == 1">电子普票</span>
					<span v-if="successDetail.invOver.invoiceType == 2">电子专票</span>
				</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票类型</view>
				<view class="item_content_right">
					<span v-if="successDetail.invOver.invoiceType == 1">电子普票</span>
					<span v-if="successDetail.invOver.invoiceType == 2">电子专票</span>
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">发票号码</u-col>
				<u-col span="8">{{successDetail.invOver.id}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票号码</view>
				<view class="item_content_right">
					{{successDetail.invOver.id}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">发票代码</u-col>
				<u-col span="8">{{successDetail.invHistMessage.invoiceNumber}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票代码</view>
				<view class="item_content_right">
					{{successDetail.invHistMessage.invoiceNumber}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">开票日期</u-col>
				<u-col span="8">{{ successDetail.invOver.overTime }}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">开票日期</view>
				<view class="item_content_right">
					{{ successDetail.invOver.overTime }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">发票金额</u-col>
				<u-col span="8"><u--text mode="price" :text="successDetail.invOver.invoiceOverAmount"></u--text></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票金额</view>
				<view class="item_content_right">
					￥{{ successDetail.invOver.invoiceOverAmount }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">不含税金额</u-col>
				<u-col span="8"><u--text mode="price" text="722.32"></u--text></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">不含税金额</view>
				<view class="item_content_right">
					722.32
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">税额</u-col>
				<u-col span="8"><u--text mode="price"
						:text="successDetail.invHistMessage.producerTax"></u--text></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">税额</view>
				<view class="item_content_right">
					￥{{successDetail.invHistMessage.producerTax}}
				</view>
			</view>
		</view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">购方信息</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">购方名称</u-col>
				<u-col span="8">{{ successDetail.invHistMessage.invoiceBuy }}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">购方名称</view>
				<view class="item_content_right">
					{{ successDetail.invHistMessage.invoiceBuy }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">购方税号</u-col>
				<u-col span="8">{{successDetail.invHistMessage.invoiceNumber}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">购方税号</view>
				<view class="item_content_right">
					{{successDetail.invHistMessage.invoiceNumber}}
				</view>
			</view>
		</view>
		<!-- <view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">销方信息</view>
			<u-row customStyle="margin-bottom:20px">
				<u-col span="4">销方名称</u-col>
				<u-col span="8">北京可味餐饮有限公司</u-col>
			</u-row>
			<u-row customStyle="margin-bottom:10px">
				<u-col span="4">销方税号</u-col>
				<u-col span="8">9112312341241212</u-col>
			</u-row>
		</view> -->
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">其他信息</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">邮箱</u-col>
				<u-col span="8">{{successDetail.invHistMessage.relevanceEmail}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">邮箱</view>
				<view class="item_content_right">
					{{successDetail.invHistMessage.relevanceEmail}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">备注</u-col>
				<u-col span="8">{{successDetail.invHistMessage.relevanceInform}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">备注</view>
				<view class="item_content_right">
					{{successDetail.invHistMessage.relevanceInform}}
				</view>
			</view>
		</view>
		<view style="margin: 20px;font-size: 18px;">
			发票申请列表
		</view>
		<view class="card" style="padding: 20px;" @click="toDetails(item)"
			v-for="(item,index) in successDetail.invoceList" :key="index">
			<view style="margin-bottom: 20px;">
				<!-- id -->
				<view style="margin-right: 10px;display:inline-block;border: #999 solid 1px; border-radius: 2px;">
					ID:{{item.id}}</view>
				<!-- name -->
				<view style="display:inline-block;font-weight: bold;">{{item.customerName}}</view>
			</view>
			<!-- <u-row customStyle="margin-bottom: 10px;">
				<u-col span="12" style="flex-flow: row;justify-content: space-between;">
					<view style="color: #999;">申请金额（元）</view>
					<view style="color: #999;">申请类型</view>
				</u-col>
			</u-row> -->
			<view class="list_content" style="margin-bottom: 10px;">
				<view style="flex-flow: row;justify-content: space-between;display: flex;">
					<view style="color: #999;">申请金额（元）</view>
					<view style="color: #999;">申请类型</view>
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom: 20px;">
				<u-col span="12" style="font-size: 18px;flex-flow: row;justify-content: space-between;">
					<u--text mode="price" :text="item.invoiceAmount"></u--text>
					<view style="">
						<span v-if="successDetail.invOver.invoiceType == 1">电子普票</span>
						<span v-if="successDetail.invOver.invoiceType == 2">电子专票</span>
					</view>
				</u-col>
			</u-row> -->
			<view class="list_content" style="margin-bottom: 40rpx;">
				<view style="font-size: 36rpx;flex-flow: row;justify-content: space-between;display: flex;">
					<view>￥{{item.invoiceAmount}}</view>
					<view>
						<span v-if="successDetail.invOver.invoiceType == 1">电子普票</span>
						<span v-if="successDetail.invOver.invoiceType == 2">电子专票</span>
					</view>
				</view>
			</view>
			<!-- <u-row customStyle="">
				<u-col span="12" style="color: #999;font-size: 12px;flex-flow: row;justify-content: space-between;">
					<view style="">申请时间:{{item.applyTime.substring(0,10)}}</view>
					<view style="">申请号:{{item.invoiceApplyNumber}}</view>
				</u-col>
			</u-row> -->
			<view class="list_content" style="margin-bottom: 40rpx;">
				<view style="color: #999;font-size: 12px;flex-flow: row;justify-content: space-between;display: flex;">
					<view>申请时间:{{item.applyTime.substring(0,10)}}</view>
					<view>
						申请号:{{item.invoiceApplyNumber}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>

	</view>
</template>

<script>
	import {
		getInvOverApi
	} from '@/api/invoce.js'
	import animationType from '@/utils/animationType.js'
	export default {
		data() {
			return {
				invoiceOverId: {},
				successDetail: {
					invHistMessage: {},
					invoceList: [],
					invOver: {},
					invOrderList: [],
				},
			};
		},
		onLoad(row) {
			this.invoiceOverId = row;
			this.getInvOverList();
		},
		methods: {
			toDetails(item) {
				this.goPage(`/pages/invoice/invoiceRequestDetails/invoiceRequestDetails?id=${item.id}`);
			},
			goPage(url) {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url
				})
			},
			getInvOverList() {
				getInvOverApi({
					invoiceOverId: this.invoiceOverId.id
				}).then((res) => {
					this.successDetail = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.title {
		font-size: 16px;
		margin: 20rpx 0;
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.item_content_left {
			flex: 1;
		}

		.item_content_right {
			flex: 2;
		}
	}
</style>